/* 
 * To change this template, choose Tools | Templates
 * and open the template in the editor.
 */

var HUD = {
    buffer: "",
    ctx: "",
    hpColor: "rgb(0,255,0)",
    
    Init: function() {
        this.buffer = document.createElement('canvas');
        this.buffer.height = 50;
        this.buffer.width = 50;
        
        this.ctx = this.buffer.getContext('2d');
    },
    
    Update: function(p) {
        this.hpColor = "rgb(" + Math.ceil(255-255*(p.hp/100)) + "," + Math.ceil(255*(p.hp/100)) + ",0)"
    },
    
    Draw: function(ctx, p) {
        this.ctx.clearRect(0,0,this.buffer.width,this.buffer.height)
        var grd=this.ctx.createRadialGradient(25,25,12,25,25,24);
        grd.addColorStop(0,this.hpColor);
        grd.addColorStop(1,"black");
        this.ctx.fillStyle=grd;
        this.ctx.strokeStyle="darkGrey";
        
        this.ctx.beginPath();
        this.ctx.arc(25,25,24,-Math.PI/2,(Math.PI*2)*(p.hp/100)-Math.PI/2);
        this.ctx.arc(25,25,15,(Math.PI*2)*(p.hp/100)-Math.PI/2, -Math.PI/2, true);
        this.ctx.closePath();
        this.ctx.fill();
        
        this.ctx.beginPath();
        this.ctx.arc(25,25,15,0,Math.PI*2);
        this.ctx.closePath();
        this.ctx.stroke();
        
        this.ctx.fillText("HP", 19, 28);
        
        ctx.drawImage(this.buffer, 12, 12);
    }
};